import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

/**
 * 总线配置卡片组件
 * 用于系统设置页面的串口配置
 * 
 * 尺寸优化：
 * - 高度：120px（确保3个卡片+波特率+间距不超过551px可用空间）
 * - 宽度：自适应父容器（约794px）
 * - 内容紧凑排列，所有元素可见
 */
Rectangle {
    id: root

    // 公开属性
    property int busId: 1
    property string busName: "配电室A"
    property string busIcon: "🏢"
    property string slaveRange: "1-40"
    property string selectedPort: ""
    property bool portOpened: false
    property var availablePorts: []
    property int currentBaudRate: 115200

    // 信号
    signal portSelected(string port)
    signal openPortClicked(string port)
    signal closePortClicked(string port)

    width: parent.width
    height: 120
    color: "white"
    radius: 6
    border.width: 2
    border.color: portOpened ? "#27ae60" : "#bdc3c7"

    // 鼠标悬停效果
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        propagateComposedEvents: true
        
        onEntered: {
            if (!portOpened) {
                root.border.color = "#3498db"
            }
        }
        
        onExited: {
            if (!portOpened) {
                root.border.color = "#bdc3c7"
            }
        }
    }

    Behavior on border.color {
        ColorAnimation { duration: 200 }
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 6

        // 标题栏（压缩）
        RowLayout {
            Layout.fillWidth: true
            Layout.preferredHeight: 24
            spacing: 8

            Text {
                text: root.busIcon
                font.pixelSize: 16
            }

            Text {
                text: root.busName
                font.pixelSize: 13
                font.bold: true
                color: "#2c3e50"
                Layout.fillWidth: true
            }

            // 状态指示灯
            Rectangle {
                width: 9
                height: 9
                radius: 4.5
                color: root.portOpened ? "#27ae60" : "#95a5a6"

                // 连接时闪烁效果
                SequentialAnimation on opacity {
                    running: root.portOpened
                    loops: Animation.Infinite
                    NumberAnimation { to: 0.4; duration: 1000 }
                    NumberAnimation { to: 1.0; duration: 1000 }
                }
            }

            Text {
                text: root.portOpened ? "已连接" : "未连接"
                font.pixelSize: 10
                font.bold: true
                color: root.portOpened ? "#27ae60" : "#95a5a6"
            }
        }

        Rectangle {
            Layout.fillWidth: true
            height: 1
            color: "#ecf0f1"
        }

        // 配置项（压缩，单行显示）
        RowLayout {
            Layout.fillWidth: true
            Layout.preferredHeight: 32
            spacing: 10

            // 串口选择
            Row {
                spacing: 6

                Text {
                    text: "串口"
                    font.pixelSize: 10
                    color: "#7f8c8d"
                    anchors.verticalCenter: parent.verticalCenter
                }

                ComboBox {
                    id: portCombo
                    width: 100
                    implicitHeight: 26
                    font.pixelSize: 9
                    model: root.availablePorts
                    
                    displayText: {
                        if (root.selectedPort !== "") {
                            return root.selectedPort
                        }
                        return "选择串口"
                    }

                    delegate: ItemDelegate {
                        width: portCombo.width
                        
                        contentItem: Text {
                            text: modelData
                            font.pixelSize: 9
                            color: "#2c3e50"
                            verticalAlignment: Text.AlignVCenter
                        }
                        
                        highlighted: portCombo.highlightedIndex === index
                    }

                    onActivated: {
                        if (currentIndex >= 0 && currentIndex < root.availablePorts.length) {
                            root.portSelected(root.availablePorts[currentIndex])
                        }
                    }
                }
            }

            Rectangle {
                width: 1
                height: 20
                color: "#ecf0f1"
            }

            // 站号范围
            Row {
                spacing: 6

                Text {
                    text: "站号范围"
                    font.pixelSize: 10
                    color: "#7f8c8d"
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: root.slaveRange
                    font.pixelSize: 11
                    font.bold: true
                    color: "#2c3e50"
                    anchors.verticalCenter: parent.verticalCenter
                }
            }

            Rectangle {
                width: 1
                height: 20
                color: "#ecf0f1"
            }

            // 波特率
            Row {
                spacing: 6

                Text {
                    text: "波特率"
                    font.pixelSize: 10
                    color: "#7f8c8d"
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: root.currentBaudRate + " bps"
                    font.pixelSize: 11
                    font.bold: true
                    color: "#2c3e50"
                    anchors.verticalCenter: parent.verticalCenter
                }
            }

            Item { Layout.fillWidth: true }
        }

        // 操作按钮（压缩）
        RowLayout {
            Layout.fillWidth: true
            Layout.preferredHeight: 30
            spacing: 8

            Button {
                id: openCloseButton
                text: root.portOpened ? "关闭串口" : "打开串口"
                font.pixelSize: 10
                implicitHeight: 26
                enabled: root.selectedPort !== ""
                Layout.preferredWidth: 90
                
                background: Rectangle {
                    color: {
                        if (!parent.enabled) return "#bdc3c7"
                        return root.portOpened ? "#e74c3c" : "#3498db"
                    }
                    radius: 4
                    opacity: parent.hovered ? 0.8 : 1.0
                    
                    Behavior on opacity {
                        NumberAnimation { duration: 150 }
                    }
                }
                
                contentItem: Text {
                    text: parent.text
                    font: parent.font
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                onClicked: {
                    if (root.portOpened) {
                        root.closePortClicked(root.selectedPort)
                    } else {
                        root.openPortClicked(root.selectedPort)
                    }
                }
            }

            Item { Layout.fillWidth: true }

            // 总线ID标识
            Rectangle {
                width: 24
                height: 24
                radius: 12
                color: root.portOpened ? "#27ae60" : "#ecf0f1"

                Text {
                    anchors.centerIn: parent
                    text: root.busId
                    font.pixelSize: 13
                    font.bold: true
                    color: root.portOpened ? "white" : "#7f8c8d"
                }
            }
        }
    }
}

